<template>
  <div class="hello">
    <div class="navtop">2024,让我们一起重新出发</div>
    <div class="navbottom">
      <div class="bottom">
        <img alt="Vue logo" @click="showPopup" src="@/assets/daohang.svg" />
      </div>
      <!-- <div id="haomiao">浩渺行无极，扬帆但信风</div> -->

      <img
        src="@/assets/sss.svg"
        style="width: 24px; height: 24px; margin-right: 7px"
        alt=""
      />

      <van-popup
        v-model:show="show"
        closeable
        lock-scroll:false
        duration="0.3"
        close-icon-position="top-right"
        position="left"
        :style="{ width: '70%', height: '100%' }"
      >
        <div class="my-container" style="padding-top: 33px; padding-left: 20px">
          <h3>嘿嘿嘿</h3>
          <router-link to="/about">点我去后台</router-link>
          <div>
            <router-link to="/login">点我去登入</router-link>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const showPopup = () => {
  show.value = true
}
</script>

<style>
a {
  text-decoration: none;
  list-style: none;
}
.hello {
  max-width: 540px;
  min-width: 320px;
  margin: 0 auto;
  font:
    normal 16px/1.5 PingFangSC-regular,
    Tahoma,
    Lucida Grande,
    Verdana,
    Microsoft Yahei,
    STXihei,
    hei;
  color: #000;
  padding: 0.8rem;
}

.hello .navtop {
  height: 44px;
  line-height: 44px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #000;
  background-color: #fff;
}
/* 字体 */
@font-face {
  font-family: 'PangMenZhengDao';
  src: url('@/assets/Pang.ttf') format('truetype');
}
/* 字体旁门 */
.navtop {
  color: #ccc;
  font-family: 'PangMenZhengDao', Arial, sans-serif;
}
.hello .navbottom {
  margin: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* font-size: 22px; */
  color: #000;
  background-color: #fff;
}
#haomiao {
  font-size: 19px;
  font-weight: 600;
  font-family: STSong, STSongti-SC-Regular, serif;
  color: #00a9ff;
  background-color: #fff;
}
a {
  list-style: none;
  color: #000;
}
</style>
